<template>
  <div class="LicenseInformationBZSJJ">
    <div class="pubBig standard">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dLeftMain">
        <div class="treeC">
          <el-tree
            :data="datalist"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
            node-key="id"
          >
            <span
              class="custom-tree-node"
              slot-scope="{ node, data }"
            >
              <span style="width: 100px">{{ node.label }}</span>
              <span style>
                <el-button
                  v-if="false"
                  type="text"
                  size="mini"
                  @click="() => addjgTJ(node, data)"
                >新增下一级</el-button>
                <el-button
                  v-if="false"
                  style="color:red; "
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >删除</el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="dRightMain cardPD">
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>新增数据集</span>
            <button
              style="float: right;"
              type="button"
              class="btn btn-primary"
              @click="addData()"
            >保存
            </button>

          </div>
          <div
            v-if="false"
            class="fjtable ypList"
          >
            <el-table
              :data="itemList"
              height="188"
              border
              style="width: 100%"
            >

              <el-table-column
                label="数据集名称"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataIdentificationID"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="子集名称"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.SubsetName"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="数据元名称"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataElementName"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                label="数据类型"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataType"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="范围"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.Range"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="允许值"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataAllowance"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="表达格式"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.PresentationFormat"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="内部标识符"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.InternalIdentifier"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="数据元标识符"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataIdentificationID"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="版本"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.Version"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRowYP(scope.$index, SelectYPList)"
                    type="text"
                    size="small"
                  >保存
                  </el-button>
                  <el-button
                    @click.native.prevent="deleteRowYP(scope.$index, SelectYPList)"
                    type="text"
                    size="small"
                  >删除
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pucLabel">
            <div class="form-group clearfix">
              <p>
                <label>范围：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.Range"
                />
              </p>
              <p>
                <label>数据集名称：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.DataSetName"
                />
              </p>
              <p>
                <label>子集名称：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.SubsetName"
                />
              </p>
              <p>
                <label>数据元名称：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.DataElementName"
                />
              </p>
              <p>
                <label>数据类型：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.DataType"
                />
              </p>

              <p>
                <label>允许值：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.DataAllowance"
                />
              </p>
              <p>
                <label>表达格式：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.PresentationFormat"
                />
              </p>
              <p>
                <label>内部标识符：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.InternalIdentifier"
                />
              </p>
              <p>
                <label>数据元标识符：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.DataIdentificationID"
                />
              </p>
              <p>
                <label>版本：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.Version"
                />
              </p>
              <p>
                <label>测试标志：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="itemObj.TestMark"
                />
              </p>
            </div>

          </div>
        </el-card>
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>数据元列表</span>

            <button
              style="float: right;"
              v-if="false"
              type="button"
              class="btn btn-primary"
              @click="addData()"
            >保存
            </button>

          </div>
          <div
            class="fjtable ypList"
            v-if="false"
          >
            <el-table
              :data="itemList"
              height="208"
              border
              style="width: 100%"
            >

              <el-table-column
                label="数据集名称"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataIdentificationID"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="子集名称"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.SubsetName"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="数据元名称"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataElementName"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                label="数据类型"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataType"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="范围"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.Range"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="允许值"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataAllowance"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="表达格式"
                width="120"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.PresentationFormat"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="内部标识符"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.InternalIdentifier"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="数据元标识符"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.DataIdentificationID"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="版本"
                width="80"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.Version"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="false"
                    @click.native.prevent="deleteRowYP(scope.$index, SelectYPList)"
                    type="text"
                    size="small"
                  >保存
                  </el-button>
                  <el-button
                    @click.native.prevent="deleteRowYP(scope.$index, SelectYPList)"
                    type="text"
                    size="small"
                  >删除
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="fjtable ypList">
            <el-table
              :data="itemList"
              height="208"
              border
              highlight-current-row
              @current-change="handleCurrentChangeList"
              style="width: 100%"
            >
              <el-table-column
                label="范围"
                width="120"
                prop="Range"
              >
              </el-table-column>
              <el-table-column
                label="数据集名称"
                width="120"
                prop="DataSetName"
              >

              </el-table-column>
              <el-table-column
                label="子集名称"
                width="120"
                prop="SubsetName"
              >
              </el-table-column>
              <el-table-column
                label="数据元名称"
                width="120"
                prop="DataElementName"
              >
              </el-table-column>

              <el-table-column
                label="数据类型"
                width="80"
                prop="DataType"
              >
              </el-table-column>

              <el-table-column
                label="允许值"
                width="80"
                prop="DataAllowance"
              >
              </el-table-column>
              <el-table-column
                label="表达格式"
                width="120"
                prop="PresentationFormat"
              >
              </el-table-column>
              <el-table-column
                label="内部标识符"
                width="80"
                prop="InternalIdentifier"
              >
              </el-table-column>
              <el-table-column
                label="数据元标识符"
                width="80"
                prop="DataIdentificationID"
              >
              </el-table-column>
              <el-table-column
                label="版本"
                width="80"
                prop="Version"
              >
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="false"
                    @click.native.prevent="deleteRowYP(scope.$index, SelectYPList)"
                    type="text"
                    size="small"
                  >保存
                  </el-button>
                  <el-button
                    @click.native.prevent="deleteRowYP(scope.$index, SelectYPList)"
                    type="text"
                    size="small"
                  >删除
                  </el-button>

                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :total="total"
          >
          </el-pagination>

        </el-card>
      </div>
      <!--弹框增加机构-->
      <div
        class="blackBg hyCZBg"
        v-if="isShow=='addJGTJ'"
      >
        <div class="panel-default column2">
          <em
            class="closes"
            @click="showDialog()"
          >×</em>
          <div class="panel-heading">添加下一级</div>
          <div class="pucLabel">
            <div class="form-group clearfix">
              <p>
                <label>菜单页面名称：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="PermissionTK.PermissionName"
                />
              </p>
              <p>
                <label>url链接：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="PermissionTK.Url"
                />
              </p>
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default"
              @click="showDialog()"
            >关闭</button>
            <button
              type="button"
              class="btn btn-primary"
              @click="addJGDataTJ()"
            >保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      datalist: [],
      defaultProps: {
        children: "childs",
        label: "label"
      },
      itemList: [],
      itemObj: {
        Id: -1,
        DataIdentificationID: "", //DataIdentificationID:数据元标识符
        InternalIdentifier: "",   // InternalIdentifier:内部标识符
        Range: "", // Range:范围
        DataSetName: "",  // DataSetName:数据集名称
        SubsetName: "",// SubsetName:子集名称
        DataElementName: "", // DataElementName:数据元名称
        Definition: "",  // Definition:定义
        DataType: "", // DataType:数据元值的数据类型
        PresentationFormat: "", // PresentationFormat:表达格式
        DataAllowance: "",// DataAllowance:数据元允许值
        TestMark: "",// TestMark:测试标志(1)
        Version: ""  // Version:版本

      },
      total: "1",
      getDataListObj: {
        page: "1",
        limit: "10",
      },
      msg: {},

      Permission: {
        PermissionId: -1,
        PermissionName: "",
        ParentId: -1,
        Url: ""
      },
      PermissionTK: {
        PermissionId: -1,
        PermissionName: "",
        ParentId: 1,
        Url: ""
      },
      isShow: "",
      selectZZJGObj: {},
      model_select_label: [], //权限类别
      model_pop_up: [], //弹出方式
      CDname: "",
      QQlabel: "",
      JGname: "",
      URlname: ""
    };
  },
  methods: {
    handleNodeClick (obj, node, val) {
      console.log("选中树节点")
      console.log(obj)
      console.log(node)
      console.log(val)

      if (node.level == 1) {//第一层
        this.itemObj.Range = node.label

        this.itemObj.DataSetName = ""
        this.itemObj.SubsetName = ""
      }
      if (node.level == 2) {//第2层
        this.itemObj.Range = node.parent.label
        this.itemObj.DataSetName = node.label
        this.itemObj.SubsetName = ""
      }
      if (node.level == 3) {//第3层
        this.itemObj.Range = node.parent.parent.label
        this.itemObj.DataSetName = node.parent.label
        this.itemObj.SubsetName = node.label
        this.getDataList(this.itemObj.Range, this.itemObj.DataSetName, this.itemObj.SubsetName);
      }
      // if (val.childs) {
      //     this.multipleSelection = val;
      // }
      // else if (val.powers) {
      //     console.log(val);
      //     val.powers.forEach(v => {
      //         v.Topname = val.name;
      //     });
      // }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.getDataListObj.page = val
      this.getDataList(this.itemObj.Range, this.itemObj.DataSetName, this.itemObj.SubsetName);
    },
    handleCurrentChangeList (val) {
      this.itemObj.Id = val.Id;//,
      this.itemObj.DataIdentificationID = val.DataIdentificationID;//, //DataIdentificationID:数据元标识符
      this.itemObj.InternalIdentifier = val.InternalIdentifier;//,   // InternalIdentifier:内部标识符
      this.itemObj.Range = val.Range;//, // Range:范围
      this.itemObj.DataSetName = val.DataSetName;//,  // DataSetName:数据集名称
      this.itemObj.SubsetName = val.SubsetName;//,// SubsetName:子集名称
      this.itemObj.DataElementName = val.DataElementName;//, // DataElementName:数据元名称
      this.itemObj.Definition = val.Definition;//,  // Definition:定义
      this.itemObj.DataType = val.DataType;//, // DataType:数据元值的数据类型
      this.itemObj.PresentationFormat = val.PresentationFormat;//, // PresentationFormat:表达格式
      this.itemObj.DataAllowance = val.DataAllowance;//,// DataAllowance:数据元允许值
      this.itemObj.TestMark = val.TestMark;//,// TestMark:测试标志(1)
      this.itemObj.Version = val.Version;//
      console.log("选中数据明细")
      console.log(this.itemObj)
    },
    deleteRowYP (index, rows) {
      console.log("药品删除")
      console.log(rows[index]);
      if (rows[index].Id == -1) {
        rows.splice(index, 1);
      } else {
        this.deleteData(rows[index].id)
      }
    },
    //查询数据集
    queryG () {
      var params = {};
      //GET /v1/DataElementIdentifiers/tree
      this.$get("DataElementIdentifiers/tree", params)
        .then(res => {
          console.log("数据集列表查询结果");
          console.log(res);
          if (res.code == 0) {
            this.datalist = [];
            // this.datalist.push(res.data);
            for (var i = 0; i < res.data.length; i++) {
              res.data[i].label = ""
              res.data[i].label = res.data[i].Range;
              if (res.data[i].childs != null && res.data[i].childs.length > 0) {
                for (var j = 0; j < res.data[i].childs.length; j++) {
                  res.data[i].childs[j].label = ""
                  res.data[i].childs[j].label = res.data[i].childs[j].DataSetName;

                  if (res.data[i].childs[j].childs != null && res.data[i].childs[j].childs.length > 0) {
                    for (var n = 0; n < res.data[i].childs[j].childs.length; n++) {
                      res.data[i].childs[j].childs[n].label = "";
                      res.data[i].childs[j].childs[n].label = res.data[i].childs[j].childs[n].SubSetname;
                    }
                  }
                }
              }
            }
            this.datalist = res.data;
            console.log("数据集列表");
            console.log(this.datalist);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //添加数据集
    addData () {
      var params = this.itemObj;
      //POST /v1/DataElementIdentifiers/Create
      var url = ""
      if (this.itemObj.Id == -1) {
        url = "DataElementIdentifiers/Create"
      } else {
        url = "DataElementIdentifiers/Update"
      }
      this.$post(url, params)
        .then(res => {
          console.log("新增菜单结果");
          console.log(res);
          if (res.code == 0) {
            this.queryG();
            this.itemObj = {
              Id: -1,
              DataIdentificationID: "", //DataIdentificationID:数据元标识符
              InternalIdentifier: "",   // InternalIdentifier:内部标识符
              Range: "", // Range:范围
              DataSetName: "",  // DataSetName:数据集名称
              SubsetName: "",// SubsetName:子集名称
              DataElementName: "", // DataElementName:数据元名称
              Definition: "",  // Definition:定义
              DataType: "", // DataType:数据元值的数据类型
              PresentationFormat: "", // PresentationFormat:表达格式
              DataAllowance: "",// DataAllowance:数据元允许值
              TestMark: "",// TestMark:测试标志(1)
              Version: ""  // Version:版本
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getDataList (Range, DataSetName, SubSetname) {
      this.itemList = [];
      var params = this.getDataListObj;
      //GET /v1/DataElementIdentifiers/tree/{Range}/{DataSetName}/{SubSetname}/detail
      this.$get("DataElementIdentifiers/tree/" + Range + "/" + DataSetName + "/" + SubSetname + "/detail", params)
        .then(res => {
          console.log("数据集数据元列表查询结果");
          console.log(res);
          if (res.code == 0) {
            this.itemList = res.data;
            this.total = res.data.TotalCount
            this.itemList = res.data.list
            console.log("数据集数据元列表");
            console.log(this.itemList);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    deleteData (id) {
      var params = {};
      //POST /v1/DataElementIdentifiers/{id}/Delete
      var url = "DataElementIdentifiers/" + id + "/Delete"

      this.$post(url, params)
        .then(res => {
          console.log("新增菜单结果");
          console.log(res);
          if (res.code == 0) {
            // this.queryG();
            this.getDataList(this.itemObj.Range, this.itemObj.DataSetName, this.itemObj.SubsetName);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //添加菜单
    Susscssful () {
      var params = this.Permission;
      //POST /api/Permission/Create
      this.$post("Permission/Create", params)
        .then(res => {
          console.log("新增菜单结果");
          console.log(res);
          if (res.code == 0) {
            this.queryG();
            this.Permission = {
              PermissionId: -1,
              PermissionName: "",
              ParentId: 1,
              Url: ""
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //添加子级菜单
    addjgTJ (node, data) {
      this.selectZZJGObj = data;
      console.log(data);
      this.isShow = "addJGTJ";
    },
    addJGDataTJ () {
      var params = this.PermissionTK;
      this.PermissionTK.ParentId = this.selectZZJGObj.PermissionId
      this.$post("Permission/Create", params)
        .then(res => {
          console.log("新增菜单结果");
          console.log(res);
          if (res.code == 0) {
            this.queryG();
            this.PermissionTK = {
              PermissionId: -1,
              PermissionName: "",
              ParentId: -1,
              Url: ""
            }
            this.isShow = ""
            this.selectZZJGObj = {};
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //删除菜单
    remove (node, data) {
      this.selectZZJGObj = data;
      // const parent = node.parent;
      // const children = parent.data.powers || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      this.$confirm("删除此菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          var params = {
            Id: this.selectZZJGObj.PermissionId
          }
          this.$post("Permission/Delete", params)
            .then(res => {
              console.log("删除菜单结果");
              console.log(res);
              if (res.code == 0) {
                this.queryG();
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getReset () {
      this.Permission = {
        PermissionId: -1,
        PermissionName: "",
        ParentId: -1,
        Url: ""
      }
    },
    showDialog () {
      this.$message({ message: "已经取消新增", type: "warning" });
      this.isShow = "";
    },
    getdata (KeyCode) {
      var data = {
        code: "get_sys_dict2",
        input: {
          code: KeyCode
        }
      };
      this.$post("CloudHIS/getRedisDataByCode", data)
        .then(res => {
          console.log(res);
          res.data.forEach(v => {
            if (v.keycode == "Permission_categories") {
              this.model_select_label = v.dtl;
            } else {
              this.model_pop_up = v.dtl;
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    //
    var a = [
      "Permission_categories", //权限类别
      "pop_up" //弹出方式
    ];
    this.queryG();
    this.getdata(a);
  }
};
</script>
<style lang="scss">
.LicenseInformationBZSJJ {
  .dLeftMain {
    position: absolute;
    width: 370px;
    top: 45px;
    left: 0;
    bottom: 20px;
    border-right: 1px solid #ddd;
    overflow: auto;
    padding-top: 8px;
  }

  .treeC {
    .el-tree-node.is-current > .el-tree-node__content > .custom-tree-nodefont {
      background-color: #fcf8e3 !important;
    }

    .el-tree-node.is-current > .el-tree-node__content {
      background-color: #fcf8e3 !important;
    }

    .el-tree-node__content:hover {
      background-color: #f6f6f6 !important;
    }
  }

  .cardPD {
    .text {
      font-size: 12px;
    }

    .el-card__header {
      padding: 8px 20px;
      border-bottom: 1px solid #ebeef5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background-color: azure;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    .box-card {
      width: 100%;
    }
  }

  .ypList {
    .el-input__inner {
      height: 20px !important;
      padding: 0 0 0 15px !important;
    }

    .el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: 10px !important;
      height: 40px;
      line-height: 40px;

      -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }

    .el-autocomplete-suggestion li {
      padding: 0px 6px !important;
      margin: 0;
      line-height: 34px;
      cursor: pointer;
      color: #606266;
      font-size: 10px !important;
      list-style: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  input {
    color: #000;
  }

  .dRightMain {
    width: 960px;
    height: 500px;
    margin-left: 370px;
    padding: 20px 0 0 20px;

    p {
      clear: noth;
      height: 32px;
      margin-bottom: 10px;

      .form-control {
        width: 200px;
      }

      span {
        display: block;
        float: left;
        width: 130px;
        line-height: 32px;

        b {
          color: red;
          position: relative;
          top: 2px;
          margin-right: 10px;
          font-size: 16px;
        }
      }
    }
  }

  .column2 {
    width: 640px;

    label {
      width: 110px;
    }
  }
}
</style>
